<template>
  <div class="container">
    <!--navbar导航-->
    <van-nav-bar :title="dynamicTitle" left-arrow @click-left="closeEdit">
    </van-nav-bar>
    <!--个性昵称-->
    <div v-if="type === 'PersonalName'">
      <van-form @submit="btnOk" ref="PersonalName">
        <van-cell value="个性昵称"></van-cell>
        <van-field
          v-model="PersonalName"
          placeholder="6~14位包含数字和字母"
          :rules="[
            {
              validator: checkPersonalName,
              message: '请输入2~14位昵称',
            },
          ]"
        ></van-field>
        <div class="text">
          <span>设置一个个性昵称， 可以彰显您与众不同的身份。</span>
        </div>
        <div class="btn">
          <van-button
            :disabled="!PersonalName"
            :class="{ btnsure: !PersonalName, btnsureafter: PersonalName }"
            native-type="submit"
            >确认</van-button
          >
        </div>
      </van-form>
    </div>
    <!--手机号码-->
    <div v-else-if="type === 'PhoneNumber'">
      <van-form @submit="btnOk" ref="PhoneNumber">
        <van-cell value="手机号码"></van-cell>
        <van-field
          v-model="PhoneNumber"
          placeholder="请输入手机号"
          :rules="[{ pattern: /^13[0-9]\d{8}$/, message: '手机号格式不正确' }]"
        ></van-field>
        <van-cell value="验证码"></van-cell>
        <van-field
          v-model="checkNumber"
          placeholder="请输入验证码666666"
          :rules="[
            { required: true, message: '验证码不能为空' },
            { validator: checkPhoneCheckNumber, message: '验证码不正确' },
          ]"
        >
          <template #button>
            <van-button
              size="small"
              type="primary"
              class="checknumber"
              native-type="button"
              >获取验证码</van-button
            >
          </template>
        </van-field>
        <div class="text">
          <span>手机号码是您账户安全的重要凭证，请尽快绑定。</span>
        </div>
        <div class="btn">
          <van-button
            :disabled="!PhoneNumber || !checkNumber"
            :class="{
              btnsure: !PhoneNumber || !checkNumber,
              btnsureafter: PhoneNumber && checkNumber,
            }"
            native-type="submit"
            >确认
          </van-button>
        </div>
      </van-form>
    </div>
    <!--电子邮箱-->
    <div v-else>
      <van-form @submit="btnOk" ref="emailAdress" validate-trigger="onSubmit">
        <van-cell value="邮箱地址"></van-cell>
        <van-field
          v-model="emailAdress"
          placeholder="请输入邮箱地址"
          :rules="[
            {
              pattern: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,
              message: '邮箱格式不正确',
            },
          ]"
        ></van-field>
        <van-cell value="验证码"></van-cell>
        <van-field
          v-model="checkNumber"
          placeholder="请输入验证码666666"
          :rules="[
            { validator: checkPhoneCheckNumber, message: '验证码不正确' },
          ]"
        >
          <template #button>
            <van-button
              size="small"
              type="primary"
              class="checknumber"
              native-type="button"
              >获取验证码</van-button
            >
          </template>
        </van-field>
        <div class="text">
          <span>电子邮箱是您账户安全的重要凭证，请尽快绑定。</span>
        </div>
        <div class="btn">
          <van-button
            :disabled="!emailAdress || !checkNumber"
            :class="{
              btnsure: !emailAdress || !checkNumber,
              btnsureafter: emailAdress && checkNumber,
            }"
            @click="btnOk"
            >确认</van-button
          >
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import { updataUser } from "@/api/user";
export default {
  name: "EditNameOrPhoneOrEmail",
  props: {
    type: {
      required: true,
    },
    userInfo: {
      required: true,
    },
  },
  data() {
    return {
      PersonalName: this.userInfo.name,
      PhoneNumber: this.userInfo.mobile,
      checkNumber: "",
      emailAdress: this.userInfo.email,
    };
  },
  methods: {
    checkPersonalName() {
      return this.PersonalName.length >= 2 && this.PersonalName.length <= 14;
    },
    checkPhoneCheckNumber() {
      return this.checkNumber == 666666 && this.checkNumber.length === 6;
    },
    async btnOk() {
      if (this.type == "PersonalName") {
        await this.$refs.PersonalName.validate();
        await updataUser({
          id: this.userInfo.id,
          name: this.PersonalName,
        });
        this.$toast.success("更改成功");
        this.$parent.$parent.getUserInfo();
        this.$emit("getUserInfo");
        this.$emit("changeShowPersonalNamePopup");
      } else if (this.type == "PhoneNumber") {
        await this.$refs.PhoneNumber.validate();
        await updataUser({
          id: this.userInfo.id,
          mobile: this.PhoneNumber,
        });
        this.checkNumber = "";
        this.$parent.$parent.getUserInfo();
        this.$toast.success("更改成功");
        this.$emit("changeShowPersonalNamePopup");
      } else {
        await this.$refs.emailAdress.validate();
        await updataUser({
          id: this.userInfo.id,
          email: this.emailAdress,
        });
        this.checkNumber = "";
        this.emailAdress = "";
        this.$parent.$parent.getUserInfo();
        this.$toast.success("更改成功");
        this.$emit("changeShowPersonalNamePopup");
      }
    },
    closeEdit() {
      if (this.type == "PersonalName") {
        this.$refs.PersonalName.resetValidation();
        this.$emit("changeShowPersonalNamePopup");
      } else if (this.type == "PhoneNumber") {
        this.checkNumber = "";
        this.$refs.PhoneNumber.resetValidation();
        this.$emit("changeShowPersonalNamePopup");
      } else {
        this.checkNumber = "";
        this.$refs.emailAdress.resetValidation();
        this.$emit("changeShowPersonalNamePopup");
      }
    },
  },
  computed: {
    dynamicTitle() {
      if (this.type == "PersonalName") {
        return "个性昵称";
      } else if (this.type == "PhoneNumber") {
        return "手机号码";
      } else {
        return "电子邮箱";
      }
    },
  },
};
</script>
<style scoped>
.text {
  display: flex;
  justify-content: center;
  margin-top: 40px;
  font-size: 12px;
  color: #a5a9b3;
  font-family: "DINPro, Regular";
}
.btn {
  margin: 40px auto;
  width: 694px;
}
.btnsure {
  opacity: 0.5;
  width: 694px;
  height: 88px;
  border: null;
  border-radius: 12px;
  /* box-shadow: #EB323266 0px 2px 3px; */
  background-image: linear-gradient(90deg, #fa7d22, #fa461b);
  color: #fff;
  font-size: 32px;
}
.btnsureafter {
  opacity: 1;
  width: 694px;
  height: 88px;
  border: null;
  border-radius: 12px;
  /* box-shadow: #EB323266 0px 2px 3px; */
  background-image: linear-gradient(90deg, #fa7d22, #fa461b);
  color: #fff;
  font-size: 32px;
}
.checknumber {
  border: 1px solid #e0d7d7;
  background-image: linear-gradient(180deg, #ffffff, #fdfdfd, #fcfafa);
  color: #5c5d60;
  opacity: 0.5;
  border-radius: 8px;
  font-size: 13px;
}
</style>
